<template>
  <div class="add-student-file">
    <v-header :user="userInfo" :createdUser="createdUser"></v-header>
    <div class="add-student clearfix" v-show="studentInfo.name">
      <div class="add-info" >
        <span class="space-left">学生信息</span>
        <span>/</span>
        <span>{{studentInfo.name}}</span>
        <span>/</span>
        <span>{{studentInfo.major==1?'文史':'理工'}}</span>
        <span>/</span>
        <span>{{studentInfo.score}}</span>
        <span>/</span>
        <span>{{studentInfo.precedence}}</span>
      </div>
    </div>
    <div class="file-content">
      <h3 class="title">
        学生档案
      </h3>
      <div class="info-form">
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="Numbering">编号</label>
                  <input type="number" class="form-control" id="Numbering" disabled v-model="studentInfo.id">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="ticketNumber">准考证号</label>
                  <input type="text" class="form-control" id="ticketNumber" placeholder="准考证号"
                         v-model="studentInfo.examNo">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="idNumber">身份证号</label>
                  <input type="text" class="form-control" id="idNumber" placeholder="身份证号" v-model="studentInfo.cardNo">
                </div>
              </div>
            </div>
          </div>
          <div class="row m-t-15">
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="studentName">姓名</label>
                  <input type="text" class="form-control" id="studentName" placeholder="姓名" v-model="studentInfo.name">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="studentName">科类</label>
                  <div class="radio">
                    <label class="radio-inline">
                      文史 <input type="radio" name="section" value="1" v-model="studentInfo.major">
                    </label>
                    <label class="radio-inline">
                      理工 <input type="radio" name="section" value="0" v-model="studentInfo.major">
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label>性别</label>
                  <div class="radio">
                    <label class="radio-inline">
                      男 <input type="radio" name="gender" value="0" v-model="studentInfo.sex">
                    </label>
                    <label class="radio-inline">
                      女 <input type="radio" name="gender" value="1" v-model="studentInfo.sex">
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row m-t-15">
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="schoolName">所在高中</label>
                  <input type="text" class="form-control" id="schoolName" placeholder="所在高中"
                         v-model="studentInfo.school">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label>年级排名</label>
                  <input style="width: 31%;" type="number" class="form-control" placeholder="排名"
                         v-model="studentInfo.rank">
                  <span>/</span>
                  <input style="width: 31%;" type="number" class="form-control" placeholder="年级人数"
                         v-model="studentInfo.stuNum">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label>往届/应届</label>
                  <div class="radio">
                    <label class="radio-inline">
                      应届 <input type="radio" name="fresh" value="0" v-model="studentInfo.stuType">
                    </label>
                    <label class="radio-inline">
                      往届 <input type="radio" name="fresh" value="1" v-model="studentInfo.stuType">
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row m-t-15">
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="score">分数：</label>
                  <input type="number" class="form-control" id="score" placeholder="分数" v-model="studentInfo.score">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="ranking">位次：</label>
                  <input type="number" class="form-control" id="ranking" placeholder="位次"
                         v-model="studentInfo.precedence">
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-inline">
                <div class="form-group">
                  <label for="policy">政策优惠：</label>
                  <input type="text" class="form-control" id="policy" placeholder="政策优惠" v-model="studentInfo.policy">
                </div>
              </div>
            </div>
          </div>
          <div class="row m-t-15">
            <div class="form-inline">
              <div class="form-group">
                <label for="score">单科成绩：</label>
                <span class="subject-name">语文</span>
                <input type="number" class="form-control subject-score" placeholder="分数" v-model="studentInfo.chinese">
                <span class="subject-name">数学</span>
                <input type="number" class="form-control subject-score" placeholder="分数" v-model="studentInfo.manth">
                <span class="subject-name">英语</span>
                <input type="number" class="form-control subject-score" placeholder="分数" v-model="studentInfo.english">
                <span class="subject-name">物/政</span>
                <input type="number" class="form-control subject-score" placeholder="分数" v-model="studentInfo.physics">
                <span class="subject-name">化/史</span>
                <input type="number" class="form-control subject-score" placeholder="分数"
                       v-model="studentInfo.chemistry">
                <span class="subject-name">生/地</span>
                <input type="number" class="form-control subject-score" placeholder="分数" v-model="studentInfo.biology">
                <span class="subject-name">综合</span>
                <input type="number" class="form-control subject-score" placeholder="分数"
                       v-model="studentInfo.comprehensive">
              </div>
            </div>
          </div>
          <div class="row m-t-15">
            <div class="form-inline">
              <div class="form-group" style="width: 100%;">
                <label for="restricted">体验受限：</label>
                <input type="text" class="form-control" style="width: 90%;" id="restricted" placeholder="比如色盲色弱"
                       v-model="studentInfo.limitContent">
              </div>
            </div>
          </div>
          <div class="row m-t-15">
            <div class="form-inline">
              <div class="form-group" style="width: 100%;">
                <label for="other-info">其他信息：</label>
                <textarea id="other-info" class="form-control" style="width: 90%;resize: none" rows="3"
                          v-model="studentInfo.other"></textarea>
              </div>
            </div>
          </div>
          <div class="row m-t-15 text-center" style="margin-bottom: 40px;">
            <div class="save-info" @click="saveStuInfo()">保存</div>
            <div class="make-plan" @click="goMakePlan()">制定报考方案</div>
          </div>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import header from '../header/header.vue';
  import footer from '../footer/footer.vue';

  export default {
    name: 'addStudentFile',
    components: {
      'v-header': header,
      'v-footer': footer
    },
    data() {
      return {
        userInfo: '',
        createdUser: '',
        stuNo: '',
        studentInfo: {
          // id: 0,                //类型：Number  必有字段  备注：无
          createdUser: '',                //类型：Number  必有字段  备注：当前登录的用户id
          name: '',                //类型：String  可有字段  备注：姓名
          examNo: '',                //类型：String  可有字段  备注：准考证号码
          cardNo: '',                //类型：String  可有字段  备注：身份证号码
          major: '',                //类型：Number  可有字段  备注：科类0:理科1:文科
          sex: '',                //类型：Number  可有字段  备注：性别0:男1:女
          school: '',                //类型：String  可有字段  备注：所在学校
          rank: '',                //类型：Number  可有字段  备注：排名
          stuNum: '',                //类型：Number  可有字段  备注：年纪人数
          stuType: '',                //类型：Number  可有字段  备注：类型0:应届1:往届
          score: '',                //类型：Number  可有字段  备注：分数
          precedence: '',                //类型：Number  可有字段  备注：位次
          policy: '',                //类型：String  可有字段  备注：政策
          limitContent: '',                //类型：String  可有字段  备注：受限制条件
          other: '',                //类型：String  可有字段  备注：其他信息
          chinese: '',                //类型：Number  可有字段  备注：语文成绩
          english: '',                //类型：Number  可有字段  备注：英语成绩
          manth: '',                //类型：Number  可有字段  备注：数学成绩
          physics: '',                //类型：Number  可有字段  备注：物理/政治成绩
          chemistry: '',                //类型：Number  可有字段  备注：化学/历史成绩
          biology: '',                //类型：Number  可有字段  备注：生物/地理成绩
          comprehensive: ''                //类型：Number  可有字段  备注：综合成绩
        }
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        let username = this.$utils.getUrlKey('username');
        this.userInfo = username;
        this.createdUser = this.$utils.getUrlKey('createdUser');
        if (this.$utils.getUrlKey('stuNo')) { // 学生档案编号
          //id 类型：Number  必有字段  备注：无
          this.stuNo = this.$utils.getUrlKey('stuNo');
          this.getStudentDetail();
        }
      },
      /**
       * 获取学生档案详情
       */
      getStudentDetail() {
        let self = this;
        let params = new URLSearchParams();
        params.append('userId', self.createdUser);
        params.append('stuNo', self.stuNo);
        self.$http.post(this.HOST + 'mendao/getStuByStuNo', params).then((response) => {
          if (response.data.code == 1) {
            let info = response.data.data;
            self.studentInfo = {
              createdUser: info.createdUser,
              name: info.name,
              examNo: info.examNo,
              cardNo: info.cardNo,
              major: info.major,
              sex: info.sex,
              school: info.school,
              rank: info.rank,
              stuNum: info.stuNum,
              stuType: info.stuType,
              score: info.score,
              precedence: info.precedence,
              policy: info.policy,
              limitContent: info.limitContent,
              other: info.other,
              chinese: info.chinese,
              english: info.english,
              manth: info.manth,
              physics: info.physics,
              chemistry: info.chemistry,
              biology: info.biology,
              comprehensive: info.comprehensive
            };
            Vue.set(this.studentInfo, 'id', info.id);
          };
        }, (response) => {
          console.log('数据请求失败');
        });
      },
      /**
       * 保存学生档案信息
       */
      saveStuInfo() {
        // 判断名字必填
        let self = this;
        self.studentInfo.createdUser = this.createdUser;
        if (self.studentInfo.name == '') {
          alert("学生姓名必填！");
          return false;
        }
        let params = new URLSearchParams();
        params.append('data', JSON.stringify(self.studentInfo));
        // 请求接口保存
        self.$http.post(this.HOST + 'mendao/editStudent', params).then((response) => {
          if (response.data.code == 1) {
            alert('学生信息保存成功');
            this.$router.push({
              path: '/studentFileList', query: {
                username: this.userInfo,
                createdUser: this.createdUser,
                stuNo: self.stuNo
              }
            });
          }
        }, (response) => {
        });


      },
      // 指定学生档案
      goMakePlan() {
        let self = this;
        self.$router.push({
          path: '/planSelection', query: {
            username: self.userInfo,
            createdUser: self.createdUser,
            stuNo: self.stuNo
          }
        });
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .add-student-file
    width: 100%
    height: auto
    .add-student
      position: fixed;
      width: 100%;
      height: 37px;
      top: 46px;
      background-color: #fff;
      color: #E65A1E;
      border-bottom: 1px solid #bbbbbb;
      z-index: 2;
      .add-info
        width: 1190px;
        margin: 0 auto;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
      space-left
        margin-left: 63px;

    .file-content
      width: 1200px
      margin: 0 auto
      min-height: 100vh
      padding-top: 83px
      .title
        width: 100%
        height: 49px
        line-height: 49px
        text-align: center
        border: 1px solid rgba(187, 187, 187, 1)
        background-color: rgba(221, 221, 221, 1)
        color: rgba(230, 90, 30, 1)
        font-size: 16px
        font-weight: 600

      .info-form
        width: 80%;
        margin: 0 auto;
        padding-top: 30px;
        .m-t-15
          margin-top: 15px
        .container
          width: 100%
          .form-group
            label
              width: 80px
            .radio
              padding: 5px
              label
                width: auto
                max-width: 100%
            .subject-name
              width: 40px
              display: inline-block
              text-align: center
            .subject-score
              width: 8%
          .save-info
            display: inline-block
            width: 185px;
            height: 45px;
            line-height: 45px;
            border-radius: 19px;
            background-color: rgba(255, 152, 0, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            text-align: center;
            box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 1);
            cursor: pointer
          .make-plan
            display: inline-block
            width: 185px;
            height: 45px;
            margin-left: 20px;
            line-height: 45px;
            border-radius: 19px;
            background-color: rgba(230, 90, 30, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            text-align: center;
            box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 1);
            cursor: pointer


</style>
